{extend name="extra@index/base" /}
{block name="title"}SpeedUp外卖{/block}

{block name="css"}

{/block}


{block name='page'}


<link href="/static/weui/css/Hui.css" rel="stylesheet" type="text/css"/>

<style type="text/css">
    .s1-borderT, .s1-borderB {
        position: absolute;
        left: 0;
        height: 3px;
        width: 100%;
        background: url() repeat-x;
        background-size: 64px 3px;
    }

    .s1-borderB {
        bottom: 1px;
    }

    .s1-borderT {
        top: 1px;
    }

    #people {
        position: relative;
        margin: 8px 0;
    }

    .pay-r {
        float: right
    }

    .pay-i {
        display: inline-block;
        width: 32px;
        font-size: 22px;
        text-align: center;
        padding-left: 10px;
    }

    textarea.H-textbox {
        min-height: 88px;
    }

    #goods_list {
        font-size: 14px
    }

    hr {
        -webkit-box-sizing: content-box;
        height: 0;
        overflow: visible;
        border-top: 1px solid #F3F3F3;
        border-width: 1px 0 0 0;
    }

    .f {
        display: inline-block;
        float: right;
    }

    .price {
        margin-right: 3px
    }

    #goods_list .name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .item {
        line-height: 24px;
        color: #666;
        margin: 10px 0;
    }

    #new_address {
        margin: 3px 0
    }

    #ok {
        padding: 0 12px;
        background: #FD5563;
        color: #fff;
        font-size: 20px;
        float: right;
    }

    .H-footer {
        height: 48px;
        line-height: 48px;
        font-size: 14px;
        padding-left: 8px;
        position: absolute;
        bottom: 0;
        width: 100%;
        box-shadow: -1px -1px 1px #eee;
    }

    #footer div {
        display: inline-block;
    }

    #price {
        float: right;
        padding-right: 8px;
    }

    #text {
        padding: 0;
        margin: 5px;
        text-align: center;
        animation: myfirst 1s linear 0s infinite alternate;
    }

    @keyframes myfirst {
        from {
            color: #333;
        }
        to {
            color: #eee;
        }
    }

</style>

<div id="vue">

    <div class="card-header" style="background: #09f;color: #fff;">
            <span class="addaddress"><span class="iconfont icon-xitongfanhui"
                                           onclick="back()">下单</span></span>

    </div>


    <div class="content" style="top: 48px;">
        <div id="people">


            <div class="H-flexbox-horizontal H-theme-background-color-white H-border-vertical-bottom-after"
                 v-if="address.Name">
                <div class="H-flex-item H-padding-10" @click="Saddress">

                    <strong class="H-font-weight-normal font-weight-500 H-font-size-16 H-display-block"
                            style="font-size: 9px;color: #aaa;"><i class="iconfont icon-dizhi1"></i> {{address.City}}
                        {{address.Address}}
                    </strong>
                    <div class="H-font-size-14   H-text-show-row-2 H-margin-vertical-top-2">
                        <i class="iconfont icon-geren"></i> {{address.Name}} <i class="iconfont icon-shouji"></i>
                        {{address.Phone}}
                    </div>
                </div>
                <span class="H-icon H-padding-horizontal-right-5 H-display-block H-vertical-middle"><i
                        class="H-iconfont H-icon-arrow-right H-theme-font-color-ccc H-font-size-14"></i></span>
            </div>
            <div class="H-flexbox-horizontal H-theme-background-color-white H-border-vertical-bottom-after" v-else
                 @click="newAddress">
                <div class="H-flex-item H-padding-10" id="5">

                    <h2 id="text">{{text}}</h2>
                </div>
            </div>


            <div class="H-flexbox-horizontal H-border-vertical-bottom-margin-left-10-after">
                <span class="sub H-vertical-middle H-padding-horizontal-left-10 H-theme-background-color-white H-font-size-16">预约时间</span>
                <i class="H-vertical-middle H-iconfont H-icon-time  H-font-size-16 H-theme-background-color-white"
                   style="padding-left:10px;color:#999"></i>
                <input type="text"
                       class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12"
                       readonly="readonly" placeholder="立即配送" id="time">
                <span style=" margin-left: -38px;"
                      class="H-icon H-padding-horizontal-right-5 H-display-block H-vertical-middle">
            <i class="H-iconfont H-icon-arrow-right H-theme-font-color-ccc H-font-size-14"></i></span>
            </div>
            <b class="s1-borderT"></b>
            <b class="s1-borderB"></b>
        </div>
        <div class="sub-title H-padding-10 H-font-size-14 H-theme-font-color-999">
            支付方式
        </div>
        <div class="H-channel-title H-flexbox-horizontal H-theme-background-color-white H-vertical-middle H-border-vertical-bottom-after">
            <i class="pay-i iconfont icon-page1" style="color: #00A0E9;"></i>
            <div class="H-channel-text H-theme-font-color-black H-flex-item H-font-size-16 H-theme-font-color-black H-padding-10 H-margin-horizontal-right-10 H-text-show-row-1">
                支付宝
                <input id="ali" type="radio" name="d2" checked="checked"
                       class="pay-r H-radio H-radio-fill H-vertical-align-middle H-font-size-18 H-theme-font-color2 H-border-radius-circle">
            </div>
        </div>
        <div class="H-channel-title H-flexbox-horizontal H-theme-background-color-white H-vertical-middle H-border-vertical-bottom-after">
            <i class="pay-i iconfont icon-weixinzhifu" style="color: #09BB07;left: -4px;position: relative;"></i>
            <div class="H-channel-text H-theme-font-color-black H-flex-item H-font-size-16 H-theme-font-color-black H-padding-10 H-margin-horizontal-right-10 H-text-show-row-1">
                微信支付
                <input id="wx" type="radio" name="d2"
                       class="pay-r H-radio H-radio-fill H-vertical-align-middle H-font-size-18 H-theme-font-color2 H-border-radius-circle">
            </div>
        </div>
        <div class="H-channel-title H-flexbox-horizontal H-theme-background-color-white H-vertical-middle H-border-vertical-bottom-after">
            <i class="pay-i iconfont icon-iconfonthuodaofukuan H-theme-font-color7"></i>
            <div class="H-channel-text H-theme-font-color-black H-flex-item H-font-size-16 H-theme-font-color-black H-padding-10 H-margin-horizontal-right-10 H-text-show-row-1">
                货到付款
                <input id="daofu" type="radio" name="d2"
                       class="pay-r H-radio H-radio-fill H-vertical-align-middle H-font-size-18 H-theme-font-color2 H-border-radius-circle">
            </div>
        </div>
        <div class="H-padding-vertical-bottom-10"></div>
        <div class="H-flexbox-horizontal H-margin-vertical-bottom-10 H-border-vertical-both-after">
    <textarea
            class="H-textbox H-vertical-align-middle H-vertical-middle H-font-size-16 H-flex-item H-box-sizing-border-box H-border-none H-outline-none H-padding-12"
            placeholder="需要什么特殊要求,可以写在这里" v-model="msg"></textarea>
        </div>
        <div class="H-padding-vertical-bottom-10"></div>
        <div class="goods_info H-theme-background-color-white H-padding-10">
            <div class="goods_title">
                <b>订单详情</b>
            </div>
            <hr>
            <div id="goods_list">
                <div class="item" v-for="c in cart">
                    <div class="number f">
                        ×
                        {{c.Number}}
                    </div>
                    <div class="price f">
                        ¥
                        {{c.Price}}
                    </div>
                    <div class="name">
                        {{c.GoodsName}}
                    </div>
                </div>
            </div>
            <hr>
            <div class="H-font-size-14 ext-add-price">
                <div class="item">
                    <div class="price f">
                        ¥<input type="number" v-model="fee"
                                style="width: 50px;display: inline-block;border: none;border-bottom: 1px solid #3af;text-align: center"/>
                    </div>
                    <div class="name">
                        配送小费
                    </div>
                </div>
                <div class="item">
                    <div class="price f">
                        ¥{{shop.ShipPrice}}
                    </div>
                    <div class="name">
                        配送费
                    </div>
                </div>
            </div>
            <hr>
            <div class="H-font-size-14 ext-add-price">
                <div class="item">
                    <div class="price f" id="total_price">
                        ¥ {{total}}
                    </div>
                    <div class="name">
                        总计
                    </div>
                </div>
            </div>
        </div>
        <div class="H-padding-vertical-bottom-10"></div>
    </div>

    <footer class="H-footer  H-theme-background-color-white H-border-vertical-top-after" id="footer">
        <div id="ok" @click="sb">
            确认下单
        </div>
        <div id="ext-mins"></div>
        <div id="price">
            {{total}}
        </div>
    </footer>
</div>

<script type="text/javascript">


    var vm = new Vue({
        el: "#vue",
        data: function () {
            return {
                address: {},
                text: "正在加载收货地址",
                total: 0.00,
                cart: [],
                shopId: "{:input('id')}",
                shop: {},
                fee: 0,
                msg: ""
            }
        },
        methods: {
            Saddress: function () {
                $.router.load("/my/index/address?from=/index/index/gouwu?id={:input('id')}", true)
            },
            newAddress: function () {
                $.router.load("/my/index/newaddress?from=/index/index/gouwu?id={:input('id')}", true)
            },
            sb: function () {
                $.showPreloader("支付中")
                var cart = new Array();
                for (var i = 0; i < vm.cart.length; i++) {
                    cart[i] = vm.cart[i];
                }
                $.post("/api/shops/make_order", {
                    cart: cart,
                    fee: vm.fee,
                    shopId: vm.shopId,
                    msg: vm.msg
                }, function (ret) {

                    $.hidePreloader()
                    if (ret.code > 0) {
                        window.db.transaction(function (tx) {
                            tx.executeSql('DELETE FROM cart WHERE ShopId = ' + vm.shopId, [], function (tx, results) {
                                console.log(results)
                            })
                        })
                    }

                    $.alert(ret.msg, function () {
                        if (ret.code > 0) {
                            $.router.load('/order', true)
                        }
                    })
                })
            }
        },
        mounted: function () {

            this.$nextTick(function () {
                window.db = openDatabase('speedup', '1.0', 'Test DB', 2 * 1024 * 1024);
                window.db.transaction(function (tx) {
                    tx.executeSql('SELECT * FROM cart WHERE ShopId = ' + vm.shopId, [], function (tx, results) {
                        vm.cart = results.rows;


                        if (results.rows.length == 0) {
                            $.alert("购物车为空", function () {
                                $.router.load('/index/index/shop?id={:input("id")}', true, 'left')
                            })
                        }

                        var t = 0;
                        for (var i = 0; i < vm.cart.length; i++) {
                            t += parseFloat(vm.cart[i].Price * vm.cart[i].Number)
                        }

                        vm.total = t;

                    })
                })


            })
        },
        watch: {
            fee: function (v) {
                if (v) {
                    vm.total = window.total + parseFloat(v);
                } else {
                    vm.total = window.total
                }
            }
        }
    })


    window.type = "ALI_APP";
    $(function () {
        var id = window.shop_id = "{:input('id')}";
        load(id);
    });
    function load(id) {
        $.showIndicator()
        $.get({
            url: '/api/shops/submit_order?shop_id=' + id,
        }, function (ret) {
            $.hideIndicator();
            if (ret.code > 0) {

                vm.address = ret.address;

                if (ret.shop.code > 0) {
                    vm.shop = ret.shop.msg;
                    vm.total += parseFloat(ret.shop.msg.ShipPrice)
                    window.total = vm.total;
                } else {
                    $.toast(ret.shop.msg)
                }

            } else {

                $.alert(ret.msg, function () {
                    if (ret.code == -1) {
                        $.router.load("/my/index/loginPage?from=/index/index/gouwu?id={:input('id')}", true);
                    } else if (ret.code == -2) {
                        vm.text = "点击新增地址"
                    }
                })

            }


        });
    }


    $(function () {

        $("nav").hide()

        $(".native-scroll").height($(window).height() - 96);


        $('[name="d2"]').change(function () {
            if ($("#ali").prop("checked")) {
                window.type = "ALI_APP"
            } else if ($("#wx").prop("checked")) {
                window.type = "WX_APP"
            } else if ($("#daofu").prop("checked")) {
                window.type = "DAOFU"
            }
        })
    })


    function back() {
        var from = '{:input("from")}';
        if (from) {
            $.router.load(from, true, 'left');
        } else {


            $.router.load("/index/index/shop?id={:input('id')}", true, 'left');

        }
    }


</script>


<!-- 页面结束 -->
{/block}


{block name="js"}


{/block}